<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$title|default=''}{if !empty($title)} · {/if}{:sysconf('site_name')}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="{:sysconf('browser_icon')}"/>
    <!--<link rel="stylesheet" href="__STATIC__/plugs/awesome/css/font-awesome.min.css?ver={:date('ymd')}">-->
    <!--<link rel="stylesheet" href="__STATIC__/plugs/bootstrap/css/bootstrap.min.css?ver={:date('ymd')}"/>-->
    <link rel="stylesheet" href="__STATIC__/plugs/layui/css/layui.css?ver={:date('ymd')}"/>
    <!--<link rel="stylesheet" href="__STATIC__/theme/default/css/console.css?ver={:date('ymd')}">-->
    <!--<link rel="stylesheet" href="__STATIC__/theme/default/css/animate.css?ver={:date('ymd')}">-->
    <!--<script src="__STATIC__/plugs/require/require.js?ver={:date('ymd')}"></script>-->
    <!--<script src="__STATIC__/admin/app.js?ver={:date('ymd')}"></script>-->
    <script src="__STATIC__/plugs/jquery/jquery.min.js?ver={:date('ymd')}"></script>
    <script src="__STATIC__/plugs/jquery/jquery.jqprint-0.3.js?ver={:date('ymd')}"></script>
    <!--<script>window.ROOT_URL = '__PUBLIC__';</script>-->
</head>
<body onload="member.focus();">

<blockquote class="layui-elem-quote">
    {$store.title}
</blockquote>
<form class="layui-form layui-form-pane" action="" method="post">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs4">
            <div class="grid-demo grid-demo-bg1">

                <div class="layui-form-item">
                    <label class="layui-form-label">会员信息</label>
                    <div class="layui-input-block">
                        <input id="member" type="text" name="member" placeholder="扫描支付码 / 输入手机号" lay-verify=""
                               autocomplete="off" class="layui-input" oninput="find()">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">商&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品</label>
                    <div class="layui-input-block layui-unselect layui-form-select layui-form-selected">
                        <input type="text" name="goods_keywords" value="" oninput="get_goods(this)" id="goods_keywords"
                               autocomplete="off" placeholder="商品编号" class="layui-input">
                        <dl class="layui-anim layui-anim-upbit" id="goods_arr" style="display: none">

                        </dl>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">合&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计</label>
                    <div class="layui-input-block">
                        <input style="font-size: large;color: red;" id="total" type="text" name="total"
                               lay-verify="required" autocomplete="off" class="layui-input" placeholder="￥" readonly
                               value="0">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到</label>
                    <div class="layui-input-block">
                        <input style="font-size: large;" id="receive" type="number" name="receive" lay-verify="required"
                               autocomplete="off" class="layui-input" placeholder="￥" onkeyup="rec(this)">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">找&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;零</label>
                    <div class="layui-input-block">
                        <input style="font-size: large;color: red;" id="back" type="text" name="back"
                               lay-verify="required" autocomplete="off" class="layui-input" placeholder="￥" readonly
                               value="0">
                    </div>
                </div>

                <div class="layui-form-item" pane>
                    <div class="layui-inline">
                        <label class="layui-form-label">收款方式</label>
                        <div class="layui-input-block">
                            <input type="radio" name="method" value="3" title="余额" disabled>
                            <input type="radio" name="method" value="2" title="微信">
                            <input type="radio" name="method" value="1" title="支付宝">
                            <input type="radio" name="method" value="4" title="现金">
                            <input type="radio" name="method" value="5" title="银行卡">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="demo1" id="sub">结账</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="res()">清空收银台</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs8">
            <fieldset class="layui-elem-field">
                <legend style="font-size:larger">会员信息</legend>
                <div class="layui-field-box">

                </div>
            </fieldset>

            <div class="grid-demo">
                <table class="layui-table" lay-skin="line" id="lst">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>

    </div>
</form>

<div style="display: none">
    <div id="print-area">
        <table style="width: 58mm;text-align: center" id="print">

        </table>
    </div>
</div>

<script src="__STATIC__/plugs/layui/layui.all.js" charset="utf-8"></script>


<script>

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        form.on('radio', function () {
            $('#receive').focus();
        });


        //监听提交
        form.on('submit(demo1)', function (data) {

            if (data.field.method == undefined) {
                layer.msg('请选择收款方式！', {icon: 5, time: 1000});
                return false;//重要
            }

            if (data.field.total <= 0) {
                layer.msg('请添加商品！', {icon: 5, time: 1000});
                return false;//重要
            }

            if (data.field.back > 0 && confirm('找零' + data.field.back + '元') || data.field.back == 0 || data.field.back < 0 && $("input[name='ycard']:checked").val() > 0) {

                $("#sub").attr("disabled",'disabled');
                var datas = data.field;

                //追加
                datas.nums = my_array_name('nums');
                datas.goods = my_array_name('goods');
                datas.prices = my_array_name('prices');
                datas.cats = my_array_name('cats');

                $.post("cashier",
                    datas,
                    function (data, status) {
                        if (status == 'success')
                            if (data.code == 1)
                                layer.msg(data.msg, {
                                    icon: 6,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    $('input[type="text"]').val('');
                                    $('input[type="number"]').val('');
                                    $('input:radio[name="method"]').removeAttr("disabled");
                                    $('input:radio[name="method"]').removeAttr('checked');

                                    $('#lst tbody').html('');
                                    $('.layui-field-box').html('');

                                    $('#print').html(data.data);
                                    print();
                                    $("#sub").removeAttr("disabled");
                                    var form = layui.form;
                                    form.render('radio'); //刷新select选择框渲染
                                });
                            else
                                layer.msg(data.msg, {
                                    icon: 5,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    $("#sub").removeAttr("disabled");
                                });
                    });
                return false;//重要
            } else if (data.field.back < 0)
                layer.msg('收款金额不足！', {icon: 5, time: 1000});
            else
                return false;
            return false;//重要
        });
    });
</script>
<script type="text/javascript">

    function my_array_name(m) {
        var valArr = new Array;
        $("input[name='" + m + "[]']").each(function (i) {
            valArr[i] = $(this).val();
        });
        var priv = valArr.join(',');
        return priv;
    }

    function sum(i) {
        var p = $(i).parent('td').prev().html();
        var v = $(i).val();
        if (v <= 0) {
            del(i);
        }
        else {
            var a = v * p;
            $(i).parent('td').next().html(a.toFixed(2));
        }
        $('#total').val(total());
        var back = $('#receive').val() - $('#total').val();
        $('#back').val(back);
    }

    function total() {
        var t = 0;
        $('tr').each(function () {
                t += +$(this).children('td').eq(4).text();
            }
        );
        return t.toFixed(2);
    }

    function del(i) {
        $(i).parent().parent().remove();
        $('#total').val(total());
        var back = $('#receive').val() - $('#total').val();
        $('#back').val(back);
    }

    function rec(r) {
        if ($(r).val() < 0) {
            $(r).val(0);
        }
        var back = $('#receive').val() - $('#total').val();
        $('#back').val(back);
    }

    function res() {
        $('input[type="text"]').val('');
        $('input[type="number"]').val('');
        $('input:radio[name="method"]').removeAttr('disabled');
        $('input:radio[name="method"]').removeAttr('checked');
        $('#lst tbody').html('');
        $('.layui-field-box').html('');

        var form = layui.form;
        form.render('radio'); //刷新select选择框渲染
    }

    function print() {
        $("#print-area").jqprint({
            debug: false,
            importCSS: true,
            printContainer: true,
            operaSupport: false
        });
    }

    function find() {
        $.post("member",
            {
                no: $('#member').val(),
            },
            function (data, status) {
                if (status == 'success') {
                    if (data.balance > 0)
                    {
//                            $('input:radio[name="method"][title="余额"]').attr("checked", "checked");
                        $("input[title = '余额']").removeAttr("disabled");
                        $("input:radio[title!='余额']").attr("disabled", 'disabled');
                    }
                    else
                    {
                        $('input:radio[name="method"]').removeAttr("disabled");
                        $('input:radio[name="method"][title="余额"]').attr("checked", false);
                        $("input[title = '余额']").attr("disabled", 'disabled');
                    }
                    $('#receive').val(data.balance);

                    var str = '';
                    str += '<div class="layui-form-item">';
                    str += '<label class="layui-form-label">姓名</label>';
                    str += '<div class="layui-input-block"><input readonly class="layui-input" value="'+data.name+'"></div>';
                    str += '</div>';

                    str += '<div class="layui-form-item" pane><div class="layui-inline">';
                    str += '<label class="layui-form-label">优惠券</label>';
                    str += '<div class="layui-input-block">';

                    if (data.ycard) {
                        $.each(data.ycard, function (index, content) {
                            str += '<input type="radio" name="ycard" value="' + content.id + '" title="' + content.name + '(满'+content.morethan+'减'+content.reduce+')' + '">';
                        });
                    }
                    str += '<input type="radio" name="ycard" value="" title="不使用" checked>';
                    str += '</div>';
                    str += '</div>';
                    str += '</div>';

                    $('.layui-field-box').html(str);

                    var form = layui.form;
                    form.render('select'); //刷新select选择框渲染
                    form.render('radio'); //刷新radio选择框渲染
                }
            });
    }

    //动态获取商品
    function get_goods(obj) {
        var keywords = obj.value;
        if (keywords == '') {
            $('#goods_arr').hide();
            return false;
        }
        $.post(
            "findGoods",
            {
                "keywords": keywords,
            },
            function (data, status) {
                if (status == 'success') {
                    var goods_arr = data.data;
                    var arr = '';
                    for (var i = 0; i < goods_arr.length; i++) {
                        var good = goods_arr[i];
                        var id = good['id'];
                        var name = good['name'];
                        if (!good['spec_title'])
                            var title = '';
                        else
                            var title = ' - ' + good['spec_title'];
                        var html = '';
                        html = '<dd lay-value="id" onclick="add_car(' + id + ')">' + good['good_number'] + name + title + '</dd>';
                        arr = arr + html;
                    }
                    if (arr == '')
                        arr = '<dd lay-value="id" class="layui-select-tips">' + '没有找到相关商品' + '</dd>';
                    $('#goods_arr').html(arr).show();
                } else {
                    $('#goods_arr').html('');
                }
            }
        );
    }

    function add_car(id) {
        $.post(
            "findGoods",
            {
                'id':id
            },
            function (data, status) {
                if (status == 'success') {
                    var goods_arr = data.data;

                    if (goods_arr['spec_title'] == null)
                        goods_arr['spec_title'] = '';
                    else
                        goods_arr['spec_title'] = ' - ' + goods_arr['spec_title'];

                    var tr = '<tr><td>' + goods_arr['good_number'] + '</td><td>' + goods_arr['name'] + goods_arr['spec_title'] + '</td><td>' + goods_arr['price'] + '</td><td style="width: 15%"><input name="nums[]" class="layui-input" type="number" value="1" oninput="sum(this)"></td><td>' + goods_arr['price'] + '</td><td><button class="layui-btn-danger layui-btn layui-btn-small" onclick="del(this)">删除</button></td><input type="hidden" value="' + goods_arr['id'] + '" name="goods[]"><input type="hidden" value="' + goods_arr['price'] + '" name="prices[]"><input type="hidden" value="' + goods_arr['cat_id'] + '" name="cats[]"></tr>';

                    $('#lst tbody').append(tr);

                    $('#total').val(total());
                    var back = $('#receive').val() - $('#total').val();
                    $('#back').val(back);

                    $('#goods_keywords').val('');
                    $('#goods_keywords').focus();
                    $('#goods_arr').hide();
                } else {
                    $('#goods_arr').html('');
                }
            }
        );
    }


</script>

</body>
</html>




